<template>
  <div class="colling-tower">
    <q-card>
      <q-card-section class="row items-center header">
        <div class="text-h6">冷却塔</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-tabs
          v-model="activeName"
          dense
          class="bg-grey-2 text-teal"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab
            :name="item.name"
            :label="item.name"
            v-for="item in equipment"
            :key="item.name"
            @click="handleClick(item.name)"
          />
        </q-tabs>
        <q-tab-panels
          v-model="activeName"
          animated
          transition-prev="fade"
          transition-next="fade"
          style="max-height: 600px;"
          class="scroll"
        >
          <q-tab-panel :name="item.name" v-for="item in equipment" :key="item.name">
            <div v-if="item.name != '所有'" style="padding-left:30px">
              <el-form
                ref="item"
                :model="item"
                label-width="90px"
                size="mini"
                inline
                :label-position="'right'"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item prop="templateId" label="运行状态">
                      {{
                      item.CT_PWR != 0 ? "运行" : "停止"
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="title" label="启动频率">反馈值 {{ item.CT_FRQ }}Hz</el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item prop="templateId" label="远程/就地">就地</el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="title" label=" ">设定值 {{ item.CT_FRQ_SET }}Hz</el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      prop
                      label="报警与否"
                      :style="{
                        color:
                          (item.CT_VFD_ALM ? item.CT_VFD_ALM : '否') == '是'
                            ? '#ED4A4B'
                            : ''
                      }"
                    >
                      {{
                      item.CT_VFD_ALM ? item.CT_VFD_ALM : "否"
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop label="是否启用">
                      {{
                      item.CT_PWR != 0 ? "是" : "否"
                      }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="middle">
                  <div style="width: 310px; clear: both;float: left">
                    <table
                      style="line-height:35px;border: 1px solid #eee;  border-radius: 5px;"
                      border="0"
                      cellpadding="0"
                      cellspacing="0"
                    >
                      <tr
                        style="background-color: #FFFFFF; background-color:#EFEFEF; font-size: 16px"
                      >
                        <td colspan="2">&nbsp;&nbsp;参数名称</td>
                      </tr>
                      <tr style="background-color: #FFFFFF;">
                        <td width="210">&nbsp;&nbsp;功率</td>
                        <td width="100">&nbsp;&nbsp;{{ item.CT_PWR }}kW</td>
                      </tr>
                      <tr style="background-color: #f7fbfc;">
                        <td width="210">&nbsp;&nbsp;频率</td>
                        <td width="100">&nbsp;&nbsp;{{ item.CT_FRQ }}Hz</td>
                      </tr>
                      <tr style="background-color: #FFFFFF;">
                        <td width="210">&nbsp;&nbsp;运行时间</td>
                        <td width="100">&nbsp;&nbsp;{{ item.CT_HRS }}H</td>
                      </tr>
                    </table>
                  </div>
                  <div style="width: 200px; float: right; padding: 15px 120px 0 0">
                    <img src="/statics/topo/cold-tools/lqt.png" />
                  </div>
                </div>
              </el-form>
            </div>
            <el-table v-else :data="tableData" :span-method="objectSpanMethod" height="300">
              <el-table-column fixed prop="equipment" label="分类" width="120"></el-table-column>
              <el-table-column prop="name" label="参数名称" width="120"></el-table-column>
              <el-table-column
                v-for="item in runNOs"
                :key="item"
                :prop="`NO` + item"
                :label="item + `#`"
                width="150"
              ></el-table-column>
            </el-table>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
      <q-separator />
      <q-card-actions align="center">
        <q-btn color="primary" size="xs" label="关 闭" v-close-popup />
      </q-card-actions>
    </q-card>
  </div>
</template>

<script>
import { lastChar, firstChar } from "@/assets/libs/utils.js";
export default {
  props: {
    //数据项
    dialogData: {
      type: Object,
      default: { text: "", dataList: [] }
    },
    //当前选中组件的索引
    index: {
      type: Number,
      default: 0
    },
    // 组件数量
    nums: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      equipment: [],
      NO: 0,
      activeName: "",
      runNOs: [],
      tableData: [
        {
          equipment: "设置状态",
          name: "运行状态",
          NO1: "停止",
          NO2: "停止",
          NO3: "停止",
          NO4: "停止",
          NO5: "停止"
        },
        {
          equipment: "设置状态",
          name: "远程/就地",
          NO1: "就地",
          NO2: "就地",
          NO3: "就地",
          NO4: "就地",
          NO5: "就地"
        },
        {
          equipment: "设置状态",
          name: "是否启用",
          NO1: "否",
          NO2: "否",
          NO3: "否",
          NO4: "否",
          NO5: "否"
        },
        {
          equipment: "设置状态",
          name: "报警与否",
          NO1: "否",
          NO2: "否",
          NO3: "否",
          NO4: "否",
          NO5: "否"
        },
        {
          equipment: "参数名称",
          name: "功率(kW)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0,
          NO5: 0
        },
        {
          equipment: "参数名称",
          name: "频率(Hz)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0,
          NO5: 0
        },
        {
          equipment: "参数名称",
          name: "运行时间(H)",
          NO1: 0,
          NO2: 0,
          NO3: 0,
          NO4: 0,
          NO5: 0
        }
        // , {
        //   equipment: '参数名称',
        //   name: '出口压力(kPa)',NO1:'--',NO2:'--',NO3:'--',NO4:'--',NO5:'--'
        // }
      ]
    };
  },
  watch: {
    dialogData: {
      handler (val) {
        this.refreshData(val);
      },
      deep: true
    }
  },
  created () {
    if (this.index) {
      this.NO = this.index;
    }
    this.activeName = this.dialogData.text;
    this.refreshData(this.dialogData);
    if (this.nums > 0) {
      for (let i = 1; i <= this.nums; i++) {
        this.runNOs.push(i);
      }
    }
  },
  methods: {
    refreshData (val) {
      // debugger
      let name = val.text.substring(2, 5);
      this.equipment = [];
      for (let i = 1; i <= this.nums; i++) {
        let item = {
          name: "",
          CT_FRQ: 0,
          CT_REM_LOC: 0,
          CT_FRQ_SET: 0,
          CT_PWR: 0,
          CT_FRQ: 0,
          CT_HRS: 0
        };
        item.name = i + "#" + name;
        this.equipment.push(item);
      }
      let item = {
        name: "所有",
        CT_FRQ: 0,
        CT_REM_LOC: 0,
        CT_FRQ_SET: 0,
        CT_PWR: 0,
        CT_FRQ: 0,
        CT_HRS: 0
      };
      this.equipment.push(item);
      this.getSketchMap(this.NO);
    },
    getSketchMap (NO) {
      let address,
        val = 0;
      for (let i = 0; i < this.dialogData.dataList.length; i++) {
        let obji = this.dialogData.dataList[i];
        address = obji.Address;
        val = obji.val;
        if (!address) {
          continue;
        }
        this.queryTable(address, val);
        if (address.indexOf("CT" + NO + "_") > -1) {
          if (address.indexOf("CT" + NO + "_PWR") > -1) {
            this.equipment[NO - 1].CT_PWR = val;
          } else if (
            address.indexOf("CT" + NO + "_FRQ_SET") > -1 &&
            address.length == 11
          ) {
            this.equipment[NO - 1].CT_FRQ_SET = val;
          } else if (
            address.indexOf("CT" + NO + "_FRQ_SET") > -1 &&
            address.length == 11
          ) {
            this.equipment[NO - 1].CT_FRQ_SET = val;
          } else if (
            address.indexOf("CT" + NO + "_FRQ") > -1 &&
            address.length == 7
          ) {
            this.equipment[NO - 1].CT_FRQ = val;
          } else if (address.indexOf("CT" + NO + "_HRS") > -1) {
            this.equipment[NO - 1].CT_HRS = val;
          } else if (address.indexOf("CT" + NO + "_REM_LOC") > -1) {
            if (val > 0) {
              this.equipment[NO - 1].CT_REM_LOC = "就地";
            }
          } else if (
            address.indexOf("CT" + NO + "_VFD_ALM") > -1 &&
            address.length == 11
          ) {
            if (val > 0) {
              this.equipment[NO - 1].CT_VFD_ALM = "是";
            }
          }
        }
      }
    },
    queryTable (address, val) {
      let NO = address.substring(2, 3);
      let NOdata = "NO" + NO;
      //运行状态
      if (address.indexOf("CT" + NO + "_START") > -1) {
        this.tableData[0][NOdata] = val != 0 ? "运行" : "停止";
      }
      //远程/就地
      else if (address.indexOf("CT" + NO + "CHL_REM_LOC") > -1) {
        this.tableData[1][NOdata] = val != 0 ? "远程" : "就地";
      }
      //是否启用
      if (address.indexOf("CT" + NO + "_PWR") > -1) {
        this.tableData[2][NOdata] = "是";
      }
      //报警与否
      if (
        address.indexOf("CT" + NO + "_VFD_ALM") > -1 &&
        address.length == 11
      ) {
        this.tableData[3][NOdata] = val != 0 ? "是" : "否";
      } else if (
        address.indexOf("CT" + NO + "_PWR") > -1 &&
        address.length == 7
      ) {
        this.tableData[4][NOdata] = val;
      } else if (
        address.indexOf("CT" + NO + "_FRQ") > -1 &&
        address.length == 7
      ) {
        this.tableData[5][NOdata] = val;
      } else if (address.indexOf("CT" + NO + "_HRS") > -1) {
        this.tableData[6][NOdata] = val;
      }
      // this.tableData[7][NOdata] = "--";
    },
    handleClick (name) {
      this.activeName = name;
      console.log("activeName :", this.activeName);
      if (name == "所有") {
        this.NO = this.equipment.length + 1;
      } else {
        let tindex = firstChar(name);
        this.NO = parseInt(tindex);
      }
      this.getSketchMap(this.NO);
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.colling-tower {
  width: 750px;
  max-width: 80vw;
  .q-card {
    width: 750px;
  }
  /deep/ .q-panel.scroll {
    overflow-x: hidden;
  }
  /deep/ .q-btn {
    padding: 0px 12px;
  }
}
.middle {
  height: 200px;
  margin-top: 20px;
}
</style>
